<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/myprofile' }">用户中心</el-breadcrumb-item>
        <el-breadcrumb-item>添加用户</el-breadcrumb-item>
        </el-breadcrumb><br>
        <center>
            <div>
                <el-form label-width="80px" class="demo-ruleForm" v-if="create_table">
                    <center><p>添加用户</p></center>
                    <el-form-item label='用户名'>
                        <el-input placeholder='请输入用户名' v-model="user_username"></el-input>
                    </el-form-item>
                    <el-form-item label='密码'>
                        <el-input placeholder='请输入密码' type="password" v-model="user_password1"></el-input>
                    </el-form-item>
                    <el-form-item label='确认密码'>
                        <el-input placeholder='请确认密码' type="password" v-model="user_password2"></el-input>
                    </el-form-item>
                    <el-form-item label="用户权限">
                        <el-select v-model="user_apply" placeholder="权限等级">
                        <el-option label="客户" value="1"></el-option>
                        <el-option label="仓库" value="2"></el-option>
                        <el-option label="商家" value="3"></el-option>
                        <el-option label="客服" value="4"></el-option>
                        <el-option label="管理员" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='验证码'>
                        <el-input placeholder='输入验证码' v-model="user_code"></el-input>
                        <!-- 图片验证码链接,点击即可重新获取验证码图片 -->
                        <img src="http://127.0.0.1:8000/img_code/" alt="" target="_blank">
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="user_created">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </center>
    </div>
        
</template>
<script>
import {get_create_user_get} from './axios_api/api.js'
export default {
    data(){
        return {
            create_table: true,
            user_username: '',
            user_password1: '',
            user_password2: '',
            user_apply: '',
            user_code: ''
        }
    },
    mounted() {

    },
    methods: {
        user_created() {
            
            if(this.user_username.length < 2 || this.user_username.length > 10){
                alert('你的用户名不符合规范');
                return false
            }
            if(this.user_password1.length < 6 | this.user_password1.length > 16){
                alert('你的密码不符合规范');
                return false
            }
            if(this.user_password1 != this.user_password2){
                alert('两次输入的密码不一致');
                return false
            }
            if(!this.user_code){
                alert('请输入验证码');
                return false
            }
            get_create_user_get({'username': this.user_username,'password1':this.user_password1,'apply': this.user_apply,'code': this.user_code}).then(res => {
                console.log(res);
            })
            
        }
    }
}
</script>